@import "./App";

@mixin full-parent-size{
    width:100%;
    height:100%;
}

@mixin full-content-area-size{
    width: 100vw;
    height: calc(100vh - #{$navbar-height});
}

@mixin fixed-center{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

@mixin page-background-image($image-url){
    background: {
        image: url($image-url);
        size: cover;
        position: center;
        repeat: no-repeat;
        attachment: fixed;
    }
}

@mixin slim-scroll-bar{
    &::-webkit-scrollbar {
        width: 8px;
        height: 1px;
    }
    
    &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: rgb(145, 145, 145);
        box-shadow: 0 2px 3px 0px #9B9B9B;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: rgb(160, 160, 160);
    }

    &::-webkit-scrollbar-thumb:active {
        background-color: rgb(175, 175, 175);
    }

    &::-webkit-scrollbar-track {
        background-color: rgb(220, 220, 220);
        border-radius: 3px;
    }
}

@mixin nav-scroll-bar {
    &::-webkit-scrollbar {
        width: 1px;
        height: 5px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background-color: rgba(145, 145, 145,0.5);
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(160, 160, 160,0.5);
    }

    &::-webkit-scrollbar-thumb:active {
        background-color: rgba(175, 175, 175,0.5);
    }

    &::-webkit-scrollbar-track {
        background-color: transparent;
        border-radius: 2px;
    }
}

@keyframes fade-in-drop {
    from {
        opacity: 0;
        transform: translateY(-50%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.div-split-line {
    width: 100%;
    height: 0;
    border-top: 1px solid rgb(228, 228, 228);
    margin: 5px 0;
}